<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/login.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelnotedetail.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/system/travelnotedetail.js"></script>
    <script type="text/javascript" src="/js/system/emoji.js"></script>
    <script type="text/javascript" src="/js/system/common.js"></script>

    <style>
        .vc_articleT img {
            width: 100%;
        }

        h4 {
            margin-left: 20px;
        }

        p {
            text-align: center;
        }

        .btn {
            width: 100px;
            height: 35px;
            border-radius: 5px;
            font-size: 16px;
            color: white;
            background-color: cornflowerblue;
        }

        .btn:hover, .btn:focus {
            background-color: #95b4ed;
        }

        .modal {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            width: 50%;
            max-width: 600px;
            height: 40%;
            max-height: 400px;
            margin: 100px auto;
            border-radius: 10px;
            background-color: #fff;
            -webkit-animation: zoom 0.6s;
            animation: zoom 0.6s;
            resize: both;
            overflow: auto;
        }

        @-webkit-keyframes zoom {
            from {
                -webkit-transform: scale(0)
            }
            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes zoom {
            from {
                transform: scale(0)
            }
            to {
                transform: scale(1)
            }
        }

        .modal-header {
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close {
            color: #b7b7b7;
            font-size: 30px;
            font-weight: bold;
            margin-right: 20px;
            transition: all 0.3s;
        }

        .close:hover, .close:focus {
            color: #95b4ed;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-body {
            padding: 1px;
            font-size: 16px;
            box-sizing: border-box;
        }

        .modal-footer {
            box-sizing: border-box;
            border-top: 1px solid #ccc;
            display: flex;
            padding: 15px;
            justify-content: flex-end;
            align-items: center;
        }

        .modal-footer button {
            width: 60px;
            height: 35px;
            padding: 5px;
            box-sizing: border-box;
            margin-right: 10px;
            font-size: 16px;
            color: white;
            border-radius: 5px;
            background-color: cornflowerblue;
        }

        .modal-footer button:hover, .modal-footer button:focus {
            background-color: #95b4ed;
            cursor: pointer;
        }

        @media only screen and (max-width: 700px) {
            .modal-content {
                width: 80%;
            }
        }
    </style>

    <script>


        function emoji(str) {
            //匹配中文
            var reg = /\([\u4e00-\u9fa5A-Za-z]*\)/g;
            var matchArr = str.match(reg);
            if (!matchArr) {
                return str;
            }
            for (var i = 0; i < matchArr.length; i++) {
                str = str.replace(matchArr[i], '<img src="' + EMOJI_MAP[matchArr[i]] + '"style="width: width:28px;"/>')
            }
            return str;
        }


        $(function () {
            var btn = document.getElementById('showModel');
            var close = document.getElementsByClassName('close')[0];
            // var cancel = document.getElementById('cancel');
            var modal = document.getElementById('modal');
            //var sure = document.getElementById('sure');
            // btn.addEventListener('click', function () {
            //     modal.style.display = "block";
            // });
            var ppppp =true;
            close.addEventListener('click', function () {
                modal.style.display = "none";
            });
            // cancel.addEventListener('click', function () {
            //     modal.style.display = "none";
            // });
            $("#_js_loginBtn").click(function () {
                $("#_j_login_form").ajaxSubmit(function (data) {
                    if (data.success) {
                        modal.style.display = "none";

                    } else {
                        popup(data.msg);
                    }
                })

            })




            // sure.addEventListener('click', function () {
            //
            //     $("#_j_login_form").ajaxSubmit(function (data) {
            //         if (data.success) {
            //             modal.style.display = "none";
            //         } else {
            //             popup(data.msg);
            //         }
            //     })
            //
            // });


            var index = 0;
            //回复
            $("#_j_reply_list").on("click", ".replyBtn", function () {
                var touser = $(this).data("touser");
                var toid = $(this).data("toid");
                $("#commentContent").focus();
                $("#commentContent").attr("placeholder", "回复：" + touser);

                $("#commentType").val(1);
                $("#refCommentId").val(toid);
            })

            //发表回复
            $(".commentBtn").click(function () {
                if (!$("#commentContent").val()) {
                    alert("评论不能为空");
                    return;
                }
                $("#commentForm").ajaxSubmit(function (data) {
                    console.log(data);
                    // var parse = JSON.parse(data);
                    if (data.success == false) {
                        modal.style.display = "block";

                    } else {
                        if (ppppp==true){
                            document.location.reload();
                        }else {
                            $("#commentContent").val("");
                            $("#commentContent").attr("placeholder", "");
                            $("#_j_reply_list").append(data);
                        }

                        //document.location.reload();
                    }

                })
            })
            //顶：点赞
            $("._j_support_btn").click(function () {

                var tid = $(this).data("tid");
                $.get("/travel/travelThumbup", {tid:tid}, function (data) {
                    if(data.success){
                        $(".topvote12655354").html(data.data.thumbsupnum);
                        popup("顶成功啦"); //

                    }else{
                        if(data.code == 102){
                            popup(data.msg);
                        }else{
                            popup("今天你已经定过了"); //
                        }

                    }
                });
            })



            //收藏
            $(".btn-collect").click(function () {
                var tid = $(this).data("tid");
                $.get("/travel/favor", {tid:tid}, function (data) {
                    console.log(data);

                    if(data.success){
                        $(".favorite_num").html(data.data.favornum);
                        $(".collect_icon").addClass("on-i02")

                        popup("收藏成功"); //
                    }else{
                        if(data.code == 102){
                            $(".collect_icon").removeClass("on-i02")
                            popup(data.msg);
                        }else{
                            $(".collect_icon").removeClass("on-i02")
                            $(".favorite_num").html(data.data.favornum);
                            popup("已取消收藏"); //
                        }
                    }
                });
            })



            //替换表情
            var ps = $("._j_reply_content");
            console.log(ps);
            for (var i = 0; i < ps.length; i++) {
                $(ps[i]).html(emoji($(ps[i]).html() + ""));
            }
        })


    </script>
</head>

<body>


    <#assign currentNav="travel">
    <#include "../common/navbar.ftl">

<div class="login_info">
    <div class="head_user">
        <a href="/mine/home">
            <img src="/images/default.jpg" />
            <i class="icon_caret_down"></i>
        </a>
    </div>
    <div class="header_msg">
        消息<i class="icon_caret_down"></i>
    </div>
    <div class="header_daka">
        <a href="javascript:;">打卡</a>
    </div>
</div>




<div id="modal" class="modal">
    <div class="modal-content">
        <header class="modal-header">
            <h4>用户登录</h4>
            <span class="close">×</span>
        </header>
        <div class="modal-body">
        <#--<form id="_j_login_form" method="post" action="/userLogin" class="form">-->
        <#--<div class="form-field">-->
        <#--<input name="username" type="text" placeholder="您的手机号" autocomplete="off"-->
        <#--data-verification-name="帐号" class="verification[required,maxSize[50],funcCall[checkShowCode]]" value="13700000000">-->
        <#--<div class="err-tip"></div>-->
        <#--</div>-->
        <#--<div class="form-field">-->
        <#--<input name="password" type="password" placeholder="您的密码" autocomplete="off" data-verification-name="密码"-->
        <#--class="verification[required,minSize[4],maxSize[50]]" value="1111">-->
        <#--<div class="err-tip"></div>-->
        <#--</div>-->
        <#--<div class="form-link"><a href="javascript:;">忘记密码</a></div>-->
        <#--&lt;#&ndash;<div class="submit-btn">&ndash;&gt;-->
        <#--&lt;#&ndash;<button id="_js_loginBtn" type="button">登 录</button>&ndash;&gt;-->
        <#--&lt;#&ndash;</div>&ndash;&gt;-->
        <#--</form>-->

            <div class="signup-forms flip">
            <#--<div class="login-box" id="_j_login_box">-->
                <div class="inner inner_v2 clearfix">
                    <div class="inner_v2_left">
                        <form id="_j_login_form" method="post" action="/userLogin">
                            <div class="form-field">
                                <input name="username" type="text" placeholder="您的手机号" autocomplete="off"
                                       data-verification-name="帐号"
                                       class="verification[required,maxSize[50],funcCall[checkShowCode]]"
                                       value="13700000000">
                                <div class="err-tip"></div>
                            </div>
                            <div class="form-field">
                                <input name="password" type="password" placeholder="您的密码" autocomplete="off"
                                       data-verification-name="密码"
                                       class="verification[required,minSize[4],maxSize[50]]" value="1111">
                                <div class="err-tip"></div>
                            </div>
                            <div class="form-link"><a href="javascript:;">忘记密码</a></div>
                            <div class="submit-btn">
                                <button id="_js_loginBtn" type="button">登 录</button>
                            </div>
                        </form>
                        <div class="connect">
                            <#--<p class="hd">用合作网站账户直接登录</p>-->
                            <div class="bd">
                                <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                                <a href="javascript:;" class="qq"><i></i>QQ</a>
                                <a href="javascript:;" class="weixin"><i></i>微信</a>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inner_v2_right">
                        <img src="/images/qrcode.jpg">
                        <p>扫一扫<br>下载骡窝窝APP</p>
                    </div>
                </div>
            <#--<div class="bottom-link">-->
            <#--还没有帐号?<a href="/regist.html">马上注册</a>-->
            <#--</div>-->
            <#--</div>-->
            </div>


        </div>
        <#--<footer class="modal-footer">-->
            <#--<button id="cancel">取消</button>-->
            <#--<button id="sure">确定</button>-->
        <#--</footer>-->
    </div>
</div>

<div class="main">
    <div class="set_index" id="_j_cover_box" style="height: 449.667px;">

        <div class="set_bg _j_load_cover"
             style="z-index: 1; background-image: url(&quot;${detail.coverUrl!};); opacity: 1;">
            <img src="${detail.coverUrl!}" style="display: none">
        </div>
        <div class="_j_titlebg">
            <div class="title_bg"></div>
            <div class="view_info" data-length="8">
                <div class="vi_con">
                    <h1 data-length="8" class="headtext lh80" style="white-space: nowrap; word-wrap: normal;">
                    ${detail.title!}</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="view_title clearfix">
        <div id="pagelet-block-a674ace86856fc38da868e9d1ed7b49c" class="pagelet-block">
            <div class="vt_center">
                <div class="ding _j_ding_father">
                    <a role="button" data-japp="articleding" rel="nofollow" data-tid="${detail.id!}" data-vote="7"
                         class="_j_support_btn" title="顶">顶</a>
                    <div class="num _j_up_num topvote12655354 ">${detail.thumbsupnum!}</div>
                </div>
                <div class="person" data-cs-t="ginfo_person_operate">
                    <a href="javascript:;" target="_blank" class="per_pic"><img width="120" height="120"
                                                                                src="${(detail.author.headImgUrl)!'/images/default.jpg'}"></a>
                    <strong><a href="javascript:;" target="_blank" class="per_name">${(detail.author.username)!}
                        (${(detail.dest.name)!}) </a></strong>
                    <a href="javascript:;" target="_blank" class="per_grade" title="LV.9">LV.9</a>
                    <a href="javascript:void(0);" class="per_attention" data-japp="following" data-uid="67648461"
                       data-follow_class="hide">
                        <img src="http://images.mafengwo.net/images/home/tweet/btn_sfollow.gif" width="38" height="13"
                             border="0" title="关注TA">
                    </a>
                    <div class="vc_time">
                        <span class="time">${(detail.createTime?string("yyyy-MM-dd HH:mm:ss"))!}</span>
                        <span><i class="ico_view"></i>${detail.viewnum!}/${detail.favornum!}</span>
                    </div>

                </div>

                <div class="bar_share _j_share_father _j_top_share_group">
                     <#if userInfo??>
                        <div class="bs_collect ">
                            <a href="javascript:void(0);" title="收藏" class="bs_btn btn-collect" data-tid="${detail.id!}"><i
                                        class="collect_icon i02 ${(isFavor?string('on-i02',''))!}" data-uid="53383161"></i>
                                <em class="favorite_num ">${(detail.favornum)!0}</em>
                            </a>
                        </div>
                     </#if>
                    <div class="bs_share">
                        <a href="javascript:void(0);" rel="nofollow" title="分享"
                           class="bs_btn"><i></i><span>${detail.sharenum!}</span><strong>分享</strong></a>
                        <div class="bs_pop clearfix" style="display: none;">
                            <a title="分享到新浪微博" rel="nofollow" role="button" class="sina" href="http://service.weibo.com/share/share.php?title=${detail.title}"></a>
                            <a title="分享到QQ空间" rel="nofollow" role="button" class="zone" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://m.goczx.com/&desc=${detail.title}"></a>
                            <a title="分享到微信" rel="nofollow" role="button" class="weixin"></a>
                        </div>
                    </div>
                        <#if detail.author.id == (userInfo.id)!-1>
                        <div class="bs_collect ">
                            <a href="/travel/input?id=${detail.id!}"
                               class="bs_btn _j_goto_comment"><i></i><strong>编辑</strong></a>
                        </div>
                        </#if>
                </div>

            </div>
        </div>
    </div>
    <div class="view clearfix" style="position: relative;">
        <div class="view_con">
            <div class="travel_directory _j_exscheduleinfo">
                <div class="tarvel_dir_list clearfix">
                    <ul>
                        <li class="time">出发时间<span>/</span>${detail.travelTime?string("yyyy-MM-dd")}<i></i></li>
                        <li class="day">出行天数<span>/</span>${detail.days!} 天</li>
                        <li class="people">人物<span>/</span>${detail.personDisplay!}</li>
                        <li class="cost">人均费用<span>/</span>${detail.perExpends!}RMB</li>
                    </ul>
                </div>
            </div>
            <div class="vc_article vc_articleT">
            ${(detail.travelContent.content)!}
            </div>
            <div>
                <div class="mfw-cmt-wrap" id="_j_reply_list">
                    <!--评论-->
                        <#list list as c>
                            <div class="mfw-cmt _j_reply_item">
                                <div class="mcmt-info">
                                    <div class="mcmt-photo">
                                        <a href="javascript:;" target="_blank">
                                            <img src="${c.headUrl!}"
                                                 width="48" height="48" alt="${c.username!}">
                                        </a>
                                    </div>
                                    <div class="mcmt-user">
                                        <a href="javascript:;" target="_blank" class="name">${c.username!}(${c.city!}
                                            )</a>
                                        <a href="javascript:;" class="level">LV.${c.level!}</a>
                                        <a href="javascript:;" class="identity identity-guide" target="_blank"></a>
                                        <a href="javascript:void(0);" class="per_attention" data-japp="following"
                                           data-uid="76382990" data-follow_class="hide">
                                            <img src="http://images.mafengwo.net/images/home/tweet/btn_sfollow.gif"
                                                 width="38" height="13" border="0" title="关注TA">
                                        </a>
                                    </div>
                                    <div class="mcmt-other">
                                        <span class="floor">${c_index +1}F</span>
                                    </div>
                                </div>
                                <div class="mcmt-con-wrap clearfix">
                                    <div class="mcmt-con">

                                    <#if c.type == 1>
                                        <div class="mcmt-quote">
                                            <p>引用 ${(c.refComment.username)!}
                                                发表于 ${(c.refComment.createTime?string('yyyy-MM-dd HH:ss'))!} 的回复：</p>
                                            <p class="_j_reply_content">${(c.refComment.content)!}</p>
                                        </div>
                                        <div class="mcmt-word">
                                            <p class="_j_reply_content">回复${(c.refComment.username)!}
                                                ：${(c.content)!}</p>
                                        </div>
                                    <#else>
                                        <div class="mcmt-quote">
                                        </div>
                                        <div class="mcmt-word">
                                            <p class="_j_reply_content">${(c.content)!}</p>
                                        </div>
                                    </#if>
                                    </div>
                                    <div class="mcmt-tag">
                                    </div>
                                </div>
                                <div class="mcmt-bot">
                                    <div class="time">${(c.createTime?string('yyyy-MM-dd HH:ss'))!}</div>
                                    <div class="option">
                                        <a role="button" class="reply-report">举报</a>
                                        <a role="button" class="_j_reply replyBtn" data-touser="${c.username!}"
                                           data-toid="${c.id!}">回复</a>
                                    </div>
                                </div>
                            </div>
                        </#list>
                </div>
                <!--发表回复-->
                <div class="mcmt-reply-wrap _j_replywrap ">
                    <div class="mcmt-tab">
                        <ul class="_j_replytab">
                            <li class="_j_publish_tab on" data-mode="article">回复游记<i></i></li>
                        </ul>
                    </div>
                    <div class="mcmt-tab-con">
                        <div class="photo-con">
                            <a href="/u/53383161.html" target="_blank" title="蚂蜂测试窝用户"><img
                                    src="http://n1-q.mafengwo.net/s12/M00/35/98/wKgED1uqIreAU9QZAAAXHQMBZ74008.png?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90"
                                    alt="骡窝窝测试用户"></a>
                        </div>
                        <div class="reply-con clearfix _j_article_mode _j_editor" id="_j_editor"
                             style="display: block;">
                            <dl>
                                <dt>
                                    <!-- 各种选项-->
                                    <div class="reply-choice">
                                        <a role="button" class="expression" id="_j_replyfacetrigger"
                                           title="选择表情"></a>
                                        <div class="clear"></div>
                                        <!--表情-->
                                            <#include "../common/emotion.ftl">
                                    </div>
                                </dt>
                                <dd>
                                    <div class="reply-text">

                                        <form action="/travel/commentAdd" method="post" id="commentForm">
                                            <input type="hidden" name="travelId" value="${detail.id!}">
                                            <input type="hidden" name="travelTitle" value="${detail.title!}">
                                            <input type="hidden" name="type" value="0" id="commentType">
                                            <input type="hidden" name="refComment.id" id="refCommentId">
                                            <input type="hidden" name="floor" value="${(list?size)!0}">

                                            <textarea class="_j_replyarea" name="content" cols="30" rows="10"
                                                      id="commentContent"
                                                      placeholder=""></textarea>

                                        </form>
                                    </div>
                                </dd>
                            </dl>
                            <div class="reply-submit">
                                <!-- 有loading状态 -->
                            <#--<#if userInfo??>-->
                                <a role="button" class="_j_publish_reply commentBtn" title="发表回复">发表回复</a>
                            <#--<#else>-->
                            <#--<a role="button" class="btn" id="showModel" title="发表回复">登录</a>-->
                            <#--</#if>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="view_side">
            <div class="relations _j_stas_content">
                <div id="pagelet-block-b50249fefe90f4816744a1eed56a7049" class="pagelet-block"
                     data-api=":note:pagelet:rightMddApi" data-params="{&quot;iid&quot;:&quot;12655354&quot;}"
                     data-async="1" data-controller="">
                    <div class="slide-right-container">
                        <div class="relation_mdd">相关目的地： &nbsp;&nbsp;

                                <#list  toasts as t>
                                    <a href="/destination/guide?id=${t.id!}" target="_blank" title="${t.name}"
                                       class="_j_mdd_stas">${t.name!}</a>
                                    &nbsp;&nbsp;
                                </#list>
                        </div>
                        <div class="its_others">
                            <div class="mdd_info">
                                <!--_j_mdd_sta为目的地点击统计，修改注意-->
                                <a href="/destination/guide?id=${(detail.dest.id)!}" title="${(detail.dest.name)!}"
                                   class="_j_mdd_stas" target="_blank">
                                    <img src="${(detail.dest.coverUrl)!}"
                                         width="240px" alt="${(detail.dest.name)!}">
                                    <i></i>
                                    <strong>${(detail.dest.name)!}</strong>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="side_sticky _j_sticky_block">
                <div id="pagelet-block-cf05fa839072c3781ee6b0ff89ced384" class="pagelet-block">
                    <div class="mainmdd_rel_notes _j_topblock" id="_j_mainmdd_rel_gls">
                        <div class="notes_gonglve" style="margin-bottom: 0">
                            <div class="side_title">相关攻略</div>
                            <div class="gonglve_slide gs1" id="_j_gl_slide_container">
                                <ul class="gs_content" style="left: 0px;">
                                        <#list sds as s>
                                            <li>
                                                <a href="/strategy/detail?id=${s.id!}" target="_blank"
                                                   class="_j_mddrel_gl_item"
                                                   title="${s.title!}"><img src="${s.coverUrl!}">
                                                    <div class="bg"></div>
                                                    <span><i></i>${s.viewnum!}</span>
                                                    <h3>${s.title!}</h3>
                                                </a>
                                            </li>
                                        </#list>

                                </ul>
                                <ul class="gs_nav gs_nav3">
                                    <li data-id="0" class="gs_nav_item1 _j_gl_item_switch on"></li>
                                    <li data-id="1" class="gs_nav_item2  _j_gl_item_switch"></li>
                                    <li data-id="2" class="gs_nav_item3  _j_gl_item_switch"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pagelet-block-9ec395fc9c1fc520835dc7de18ceacb1" class="pagelet-block">
                <div class="mainmdd_rel_notes _j_topblock" id="_j_mainmdd_rec_gls">
                    <div class="notes_gonglve" style="margin-bottom: 0">
                        <div class="side_title">相关游记</div>
                        <div class="gonglve_slide gs1" id="_j_rec_slide_container">
                            <ul class="gs_content" style="left: 0px;">
                                    <#list ts as t>

                                        <li>
                                            <a href="/travel/detail?id=${t.id!}" target="_blank"
                                               class="_j_mddrel_gl_item"
                                               title="${t.title!}">
                                                <img src="${t.coverUrl!}">
                                                <div class="bg"></div>
                                                <span><i></i>${t.viewnum!}</span>
                                                <h3>${t.title!}</h3>
                                            </a>
                                        </li>

                                    </#list>

                            </ul>
                            <ul class="gs_nav gs_nav3">
                                <li data-id="0" class="gs_nav_item1 _j_gl_item_switch on"></li>
                                <li data-id="1" class="gs_nav_item2  _j_gl_item_switch"></li>
                                <li data-id="2" class="gs_nav_item3  _j_gl_item_switch"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                       <#include "../common/footer.ftl">
</body>

<script>




</script>
</html>